<template>

  <div id="articleAdd">
    <div class="breadcrumb-box">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/article-management/article-list' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>文章编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-box">
      <el-row :span="16">
        <el-col :span="16">
          <el-form :label-position="labelPosition" label-width="18rem" :model="ArticleSaveObj" ref="ArticleSaveObj">
            <el-form-item label="文章标题"
                          prop="title"
                          :rules="[
                { required: true, message: '标题不能为空'}
              ]"
            >
              <el-input v-model="ArticleSaveObj.title"></el-input>
            </el-form-item>
            <el-form-item label="作者"
              prop="author"
            >
              <el-input v-model="ArticleSaveObj.author"></el-input>
            </el-form-item>
            <el-form-item label="国籍"
              prop="country"
            >
              <el-input v-model="ArticleSaveObj.country"></el-input>
            </el-form-item>
            <el-form-item label="朝代"
              prop="dynasty"
            >
              <el-input v-model="ArticleSaveObj.dynasty"></el-input>
            </el-form-item>
            <el-form-item label="文章出处"
              prop="book"
            >
              <el-input v-model="ArticleSaveObj.book"></el-input>
            </el-form-item>
            <el-form-item label="文章标签"
              prop="tags"
            >
              <el-input v-model="ArticleSaveObj.tags"></el-input>
            </el-form-item>
            <el-form-item label="文章风格"
              prop="style"
            >
              <el-input v-model="ArticleSaveObj.style"></el-input>
            </el-form-item>
            <el-form-item label="用户Id"
              prop="userId"
              :rules="[
                { required: true, message: '用户Id不能为空'}
              ]"
            >
              <el-input v-model="ArticleSaveObj.userId"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="articleProfile">
              <el-input type="textarea" v-model="ArticleSaveObj.articleProfile"></el-input>
            </el-form-item>
            <el-form-item label="文章解析" prop="analysis">
              <el-input type="textarea" v-model="ArticleSaveObj.analysis"></el-input>
            </el-form-item>
            <el-form-item label="创作时间"
              prop="createTime"
            >
              <el-date-picker
                v-model="ArticleSaveObj.createTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="文章类型"
                          prop="type"
                          :rules="[
                { required: true, message: '文章类型不能为空'}
              ]"
            >
              <el-select v-model="ArticleSaveObj.type" placeholder="请选择文章类型">
                <el-option v-for="item in TypeLevelArray" :label="item.type" :value="item.value" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文章权限" prop="isOpen">
              <el-select v-model="ArticleSaveObj.isOpen" placeholder="请选择文章权限">
                <el-option v-for="item in isOpenArray" :label="item.type" :value="item.value" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文章状态" prop="articleStatus">
              <el-select v-model="ArticleSaveObj.articleStatus" placeholder="请选择文章状态">
                <el-option v-for="item in articleStatusArray" :label="item.type" :value="item.value" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="文章类别">
              <el-select v-model="ArticleSaveObj.articleClass" placeholder="请选择文章类别">
                <el-option v-for="item in articleClassArray" :label="item.type" :value="item.value" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <div class="el-form-item">
              <p class="el-form-item__p" style="width: 18rem;">文章内容</p>
              <hr class="hr-border"/>
              <el-col  class="content-box" :span="24" v-for="(item, idx) in ArticleSaveObj.contents" :key="idx">
                <el-form-item label="文字颜色">
                  <el-input v-model="item.fontColor"></el-input>
                </el-form-item>
                <el-form-item label="文字大小">
                  <el-input v-model="item.fontSize"></el-input>
                </el-form-item>
                <el-form-item label="文章内容">
                  <el-input v-model="item.content"></el-input>
                </el-form-item>
                <el-form-item style="padding: 1rem 0;">
                  <el-button type="primary" @click="addArticleContent(idx)">新增</el-button>
                  <el-button type="info" v-if="ArticleSaveObj.contents.length > 1" @click="deleteArticleContent(idx)">删除</el-button>
                </el-form-item>
              </el-col>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ArticleSaveObj')">保存</el-button>
              <el-button :plain="true" type="info" @click="goArticleList">取消</el-button>
              <el-button :plain="true" type="info" @click="resetForm('ArticleSaveObj')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'articleAdd',
    beforeRouteEnter (to, from, next) {
      next(function (vm) {
        vm.wxSaId = parseInt(to.query.Id)
        if (vm.wxSaId > 0) {
          vm.doGetWxSaData()
        }
      })
    },
    data () {
      return {
        labelPosition: 'right',
        TypeLevelArray: [{
          value: 1,
          id: 1,
          type: '古体诗'
        }, {
          value: 2,
          id: 2,
          type: '五言绝句'
        }, {
          value: 3,
          id: 3,
          type: '七言绝句'
        }, {
          value: 4,
          id: 4,
          type: '五言律诗'
        }, {
          value: 5,
          id: 5,
          type: '七言律诗'
        }, {
          value: 6,
          id: 6,
          type: '词'
        }, {
          value: 7,
          id: 7,
          type: '曲'
        }, {
          value: 8,
          id: 8,
          type: '长文'
        }, {
          value: 9,
          id: 9,
          type: '现代诗'
        }],
        isOpenArray: [{
          value: 2,
          id: 2,
          type: '所有人可见'
        }, {
          value: 1,
          id: 1,
          type: '仅自己可见'
        }],
        articleClassArray: [{
          value: 1,
          id: 1,
          type: '系统文章'
        }, {
          value: 2,
          id: 2,
          type: '用户文章'
        }],
        articleStatusArray: [{
          value: 2,
          id: 2,
          type: '发布'
        }, {
          value: 1,
          id: 1,
          type: '草稿'
        }, {
          value: 3,
          id: 3,
          type: '下架'
        }, {
          value: 4,
          id: 4,
          type: '删除'
        }],
        ArticleSaveObj: {
          title: '',  // 文章标题
          author: '',  // 文章作者
          country: '',  // 文章作者国籍
          dynasty: '',  // 文章朝代
          createTime: '',  // 文章创作时间
          book: '',  // 文章出自书名
          userId: '',  // 上传者用户id
          articleProfile: '',  // 文章简介
          tags: '',  // 文章标签
          style: '',  // 文章风格
          type: '',  // 文章类型
          analysis: '',  // 文章解析
          isOpen: 2,  // 文章是否公开
          articleStatus: 2,  // 文章状态
          articleClass: 1,  // 文章类别
          contents: [{
            fontColor: '',
            fontSize: '',
            audioUrl: '',
            videoUrl: '',
            imgs: [],
            serialNum: 0,
            content: ''
          }]  // 文章内容
        }
      }
    },
    methods: {
      submitForm (formName) {
        let that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (that.wxSaId > 0) {
              this.Api.addArticleData().then((res) => {
                return this.Api.checkResponse(res)
              }).then(data => {
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                })
                this.$router.push('/wxSaList')
              }).catch(error => {
                this.Api.handleError(error)
              })
            } else {
              if (that.ArticleSaveObj.contents.length < 2 && !that.ArticleSaveObj.contents[0].content) {
                this.$message({
                  type: 'warning',
                  message: '文章内容不能为空!'
                })
              } else {
                that.ArticleSaveObj.contents.forEach((val, idx) => {
                  val.serialNum = idx
                })
                let _deepCloneArticleSaveObj = this.$filters.deepClone(that.ArticleSaveObj)
                this.MyDebugger.log('发送请求数据', _deepCloneArticleSaveObj)

                this.Api.addArticleData(_deepCloneArticleSaveObj).then((res) => {
                  return this.Api.checkResponse(res)
                }).then(data => {
                  this.$message({
                    type: 'success',
                    message: '保存成功!'
                  })
                  this.$router.push('/article-management/article-list')
                }).catch(error => {
                  this.Api.handleError(error)
                })
              }
            }
          } else {
            this.MyDebugger.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$confirm('此操作将重置所填信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs[formName].resetFields()
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          })
        })
      },
      addArticleContent (idx) {
        this.MyDebugger.log(idx)
        let that = this
        that.ArticleSaveObj.contents.splice(idx + 1, 0, {
          fontColor: '',
          fontSize: '',
          audioUrl: '',
          videoUrl: '',
          imgs: [],
          serialNum: 0,
          content: ''
        })
      },
      deleteArticleContent (idx) {
        this.MyDebugger.log(idx)
        let that = this
        that.ArticleSaveObj.contents.splice(idx, 1)
      },
      goArticleList () {
        this.$router.go(-1)
      }
    }
  }
</script>
<style>
  .breadcrumb-box{
    font-size: 1.2rem;
    margin: 1rem 0;
    background-color: beige;
    padding: 1rem 0 1rem 1rem;
  }
  .btn-box{
    text-align: center;
    padding: 2rem 0;
    background-color: #edffef;
  }
  .content-box {
    border-bottom: 1px solid #20a0ff;
    margin-bottom: 1rem;
  }

  .hr-border{
    margin-top: 0.2rem;
    margin-bottom: 1rem;
    border:0;
    background-color: #c5c6cc;
    height:2px;
  }
  .el-form-item__p{
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: #5a5e66;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0;
  }
</style>
